<template>
  <div class="df fdc jcc w100 h100 p40 bsbb aife bce">
    <div class="df aic w100 header mb20">
      <div class="df aic f1">
        <img class="logo" src="@/assets/imgs/logo.png" alt="" />
        <img class="logo2" src="@/assets/imgs/lname.png" alt="" />
        <img class="logo3" src="@/assets/imgs/lename.png" alt="" />
      </div>
      <div class="df aic pr">
        <div style="
            border: 1px solid #dde2e9;
            padding: 10px 20px;
            border-radius: 8px;
            background-color: #fff;
          " class="df aic cp" @click="openSearch">
          <img src="@/assets/imgs/search-normal.png" style="width: 20px; height: 20px" alt="" />
          <div style="color: #7C8599;" class="ml10">请输入关键词进行搜索</div>
        </div>
        <!-- <el-input class="pl20 bsbb" v-model="searchContent" ref="searchRef" @click="openSearch" :prefix-icon="Search" placeholder="请输入关键词进行搜索"> -->
        <!-- </el-input> -->
        <div>
          <img class="avater" src="@/assets/imgs/defaultAvatar.png" alt="" />
        </div>
      </div>
    </div>
    <div style="height: 95%" class="df aic w100 jcsb">
      <div style="height: 5%" class="h100 w20 df fdc">
        <div class="df aic jcsb view-mian-header">
          <div class="df aic">
            <img class="icon-folder" src="@/assets/imgs/folder.png" alt="" />
            <p style="margin-left: 6px;color: #0C0D0E;" class="fs14 fw600">全部收藏</p>
          </div>
          <p class="fs14 fw600 c7">{{ options.length }}</p>
        </div>
        <div style="height: 5%" class="df aic jcsb">
          <p class="fs12 fw600">文件夹</p>
          <el-popover trigger="hover" class="box-item" placement="right-start" width="100">
            <div @click="create_folder_by_icon" class="df aic cp wfc hfc">
              <img class="create-icon" src="@/assets/imgs/createFolder.png" alt="" />
              <p class="ml10 fw600 fs12">新建文件夹</p>
            </div>
            <template #reference>
              <div ref="create_f" @click="dialog_folder = true">
                <el-icon class="cp">
                  <Plus />
                </el-icon>
              </div>
            </template>
          </el-popover>
        </div>
        <div style="height: 90%">
          <el-scrollbar>
            <!-- <div>
              <folder-item :data="options" @create-folder="create_folder_by_icon"
              @add-child-folder="addChildFolder" @delete-folder="delete_folder" @rename-folder="handleRename"
              @refres-list="refreshList" @move-folder="moveToFolderChild" @change-status="changeStatus">
            </folder-item>
            </div> -->
            <el-tree style="max-width: 600px" :data="options" :props="defaultProps">
              <template #default="{ node, data }">
                <div style="height: 30px;" class="df aic jcsb w100">
                  <div class="df aic">
                    <img src="@/assets/imgs/list-folder.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                    <div @click="getNewData(data)" class="f1">{{ node.label }}</div>
                  </div>
                  <div class="df aic icons ml20">
                    <img @click="create_folder_by_icon" style="width: 16px;height: 16px;"
                      src="@/assets/imgs/createFolder.png" alt="">
                    <img @click="addChildFolder(data)" style="width: 16px;height: 16px;margin-left: 10px;"
                      src="@/assets/imgs/folder.png" alt="">
                    <img @click="moveToFolderChild(data)" style="width: 16px;height: 16px;margin-left: 10px;"
                      src="@/assets/imgs/move_folder.png" alt="">
                    <img @click="rename(data)" style="width: 16px;height: 16px;margin-left: 10px;"
                      src="@/assets/imgs/rename.png" alt="">
                    <img @click="delete_folder(data)" style="width: 16px;height: 16px;margin-left: 10px;"
                      src="@/assets/imgs/del.png" alt="">
                  </div>
                </div>

              </template>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div style="margin-left: 10px;" class="df aic f1 h100">
        <div style="padding: 12px 32px 12px 32px;margin-right: 16px;box-shadow: 0 10px 10px -5px;"
          class="h100  bsbb w50 pr content df fdc">
          <div class="h100" v-show="isDetail == 1">
            <div v-show="isChooseAll" class="content-footer p20 bsbb w100 df aic jcsb">
              <div class="df aic wfc">
                <el-checkbox @change="chooseAllChange" v-model="isChecked"></el-checkbox>
                <div style="min-width: 60px" class="ml10">
                  已选{{ chooseItem }}项
                </div>
                <el-icon @click="closeChooseAll" class="ml20 cp">
                  <Close />
                </el-icon>
              </div>
              <div class="df aic">
                <div class="df aic small-item">
                  <img src="@/assets/imgs/semi-icons-delete.png" style="width: 16px; height: 16px" alt="" />
                  <div class="ml10 cr">删除</div>
                </div>
                <div @click="chooseAll" class="df aic small-item">
                  <img src="@/assets/imgs/chooseAll.png" style="width: 16px; height: 16px" alt="" />
                  <div class="ml10">全选</div>
                </div>
                <div @click="moveToFolder" @dragover.prevent @dragenter.prevent @drop="onDrop"
                  class="df aic small-item">
                  <img src="@/assets/imgs/semi-icons-filled_arrow_up.png" style="width: 16px; height: 16px" alt="" />
                  <div style="margin-left: 8px;">移动到文件夹</div>
                </div>
              </div>
            </div>
            <div style="height: 5%" class="df aic jcsb">
              <div @click="addFav" class="df aic add-collection">
                <img class="collection-img" src="@/assets/imgs/collection.png" alt="" />
                <p class="add-text">添加收藏</p>
              </div>
              <div class="df a ic">
                <div @click="chooseMany" style="border: 1px solid #DEE0E3;border-radius: 4px;padding: 5px;"
                  class="df aic fs12 mr20 cp">

                  <img style="margin-right: 4px;" class="icon" src="@/assets/imgs/pl.png" alt="" />

                  <p style="color: #42464E;">批量管理</p>
                </div>
                <el-popover trigger="hover" class="box-item" title="" placement="right-start">
                  <div @click="checkAll(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">全部</el-button>
                  </div>
                  <div @click="checkWx(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看微信</el-button>
                  </div>
                  <div @click="checkXhs(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看小红书</el-button>
                  </div>
                  <div @click="checkBli(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看bilibili</el-button>
                  </div>
                  <div @click="checkDy(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看抖音</el-button>
                  </div>
                  <div @click="checkTt(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看头条</el-button>
                  </div>
                  <div @click="checkOther(item)" class="df aic cp wfc hfc">
                    <el-button class="ml10 fw600 fs12">只看其他</el-button>
                  </div>
                  <template #reference>
                    <div class="df aic fs12 mr20 cp">
                      <img style="margin-right: 4px;" class="icon" src="@/assets/imgs/choose.png" alt="" />
                      <p style="color: #7C8599;">筛选</p>
                    </div>
                  </template>
                </el-popover>

                <div @click="sortList" class="df aic fs12 mr20 cp">
                  <img style="margin-right: 4px;" class="icon" src="@/assets/imgs/px.png" alt="" />
                  <p style="color: #7C8599;">排序</p>
                </div>
                <div @click="changeViews" class="df aic fs12 mr20 cp">
                  <img style="margin-right: 4px;" class="icon" src="@/assets/imgs/view.png" alt="" />
                  <p style="color: #7C8599;">视图</p>
                </div>
              </div>
            </div>
            <div style="height: 95%" v-if="model_active == 1">
              <el-scrollbar>
                <div style="--width-ratio:30%" class="df fww h100">
                  <div style="
                      width:255px;
                      height: 305px;
                    " v-for="(item, index) in lists" draggable="true" @dragstart="startDrag($event, item)"
                    @dragend="endDrag" class="skeleton-main mr20 fww mt20 cp">
                    <el-skeleton style="width: 255px" :loading="item.loading" animated>
                      <template #template>
                        <el-skeleton-item variant="image" style="width: 100%" />
                        <div style="
                            padding: 14px 14px 16px 14px;
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                          ">
                          <div>
                            <el-skeleton-item variant="h3" style="width: 100%" />
                            <div style="
                                display: flex;
                                align-items: center;
                                justify-items: space-between;
                                margin-top: 16px;
                                height: 16px;
                              ">
                              <el-skeleton-item variant="text" style="margin-right: 16px" />
                              <el-skeleton-item variant="text" style="width: 30%" />
                            </div>
                            <el-skeleton-item variant="text" style="width: 100%; margin-top: 16px"></el-skeleton-item>
                          </div>
                          <div class="df aic fs12">
                            <img class="spin-animation" src="@/assets/imgs/loading.png" style="
                                width: 16px;
                                height: 16px;
                                margin-right: 20px;
                              " alt="" />
                            <p>正在解析中...</p>
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div @click="toDetail(item)" style="overflow: hidden;"
                          :style="{ 'border': item.checked ? '2px solid #00BB88' : 'none' }" class="real-main df fdc">
                          <div :ref="el => setItemRef(el, index)" style="border-radius: 20px 20px 0 0;" class="bc-img">
                            <!-- <img :src="item.cover_image + `?x-oss-process=image/resize,m_fill,w_${widthImg?widthImg:200},h_${heightImg?heightImg:200}/crop,w_${widthImg?widthImg:200},h_${heightImg?heightImg:200},g_center`" class="w100 h100" alt="" /> -->
                            <img
                              :src="item.cover_image + `?x-oss-process=image/resize,m_fill,w_250,h_120/crop,w_250,h_120,g_center`"
                              class="w100 h100" alt="" />
                          </div>
                          <div style="padding: 16px" class="mian-container df fdc">
                            <p style="height: 50px;color: #0C0D0E;" :title="item.title"
                              class="container-title fw600 mb10 elli2">
                              {{ item.title }}
                            </p>
                            <div class="container-main w100 f1 df aic">
                              <div class="h100" style="
                                  width: 2px;
                                  background: linear-gradient(
                                    #ff8c00,
                                    #5ed6b5,
                                    #5ed6b5,
                                    #ff8c00
                                  );
                                "></div>
                              <div :title="item.summary" class="h100 elli f1 ml10">
                                <div style="font-size: 12px; color: #0C0D0E;white-space: pre-line;"
                                  v-html="md.render(item.summary ? item.summary : '')">

                                </div>
                              </div>
                            </div>
                            <div class="df aic mt10">
                              <img :src="item.websitUrl" style="
                                  width: 16px;
                                  height: 16px;
                                  margin-right: 10px;
                                " alt="" />
                              <p style="font-size: 12px;color: #7C8599;">{{ transDate(item.created_at) }}</p>
                            </div>
                          </div>
                          <el-popover trigger="hover" class="box-item" title="" placement="right-start">
                            <div @click="deleteFav(item)" class="df aic cp wfc hfc">
                              <img class="create-icon" src="@/assets/imgs/del.png" alt="" />
                              <p class="ml10 fw600 fs12">删除收藏</p>
                            </div>
                            <template #reference>
                              <span class="more" v-if="!isCheckMany" style="
                                  font-size: 30px;
                                  transform: rotate(90deg);
                                  color: #fff;
                                ">···</span>
                            </template>
                          </el-popover>
                        </div>
                      </template>
                    </el-skeleton>
                    <el-checkbox @change="boxChange" v-if="isCheckMany" class="more-check" style="z-index: 999"
                      v-model="item.checked"></el-checkbox>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div v-if="model_active == 2" style="height: 95%" class="mt20 pb60 bsbb">
              <el-scrollbar>
                <div style="
                    height: 140px;
                    border-bottom: 1px solid #e5e8ed;
                    margin-top: 20px;
                    position: relative;
                    padding: 10px;
                    box-sizing: border-box;
                  " v-for="item in lists" draggable="true" @dragstart="startDrag($event, item)" @dragend="endDrag"
                  :key="item" @click="toDetail(item)">
                  <el-skeleton style="width: 100%;height: 120px;" :loading="item.loading" animated>
                    <template #template>
                      <div class="df w100 h100">
                        <el-skeleton-item variant="image" style="width: 150px;height: 70px;margin-right: 10px;" />
                        <div class="f1">
                          <el-skeleton-item variant="h3" style="width: 30%" />
                          <el-skeleton-item variant="text" style="width: 100%" />
                          <el-skeleton-item variant="text" style="width: 100%" />
                          <el-skeleton-item variant="text" style="width: 100%" />
                          <el-skeleton-item variant="text" style="width: 100%" />

                        </div>
                      </div>
                    </template>
                    <template #default>
                      <div class="df aic jcsb h100 cp">
                        <div class="df aic h100">
                          <img
                            :src="item.cover_image + `?x-oss-process=image/resize,m_fill,w_250,h_120/crop,w_250,h_120,g_center`"
                            style="
                                width: 150px;
                                border-radius: 8px;
                                margin-right: 20px;
                                height: 70px;
                              " alt="" />
                          <div class="h100 df fdc f1">
                            <div style="color: #0C0D0E;" class="fw600">{{ item.title }}</div>
                            <div style="padding: 10px 10px 10px 0;" class=" f1 df w100 aic">
                              <div class="h100" style="
                                    width: 2px;
                                    background: linear-gradient(
                                      #ff8c00,
                                      #5ed6b5,
                                      #5ed6b5,
                                      #ff8c00
                                    );
                                  "></div>
                              <div class="pl10 elli2 f1 pr40">
                                <div style="white-space: pre-line;"
                                  v-html="md.render(item.summary ? item.summary : '')">
                                </div>
                              </div>
                            </div>
                            <div class="df aic h100">
                              <img :src="item.websitUrl" style="width: 16px; height: 16px" alt="" />
                              <p class="ml10">{{ transDate(item.created_at) }}</p>
                            </div>
                          </div>
                        </div>
                        <div style="width: 20px" class="h100 df aic jcc">
                          <el-popover trigger="click" class="box-item" title="" placement="right-start">
                            <div @click="deleteFav(item)" class="df aic cp wfc hfc">
                              <img class="create-icon" src="@/assets/imgs/del.png" alt="" />
                              <p class="ml10 fw600 fs12">删除收藏</p>
                            </div>
                            <template #reference>
                              <div v-show="!isCheckMany" class="more-2 df aic jcc"
                                style="font-size: 30px; transform: rotate(90deg)">
                                ···
                              </div>
                            </template>
                          </el-popover>
                          <el-checkbox @change="boxChange" v-if="isCheckMany" style="z-index: 99"
                            v-model="item.checked"></el-checkbox>
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
              </el-scrollbar>
            </div>
            <div class="mt20 df fww" style="height: 95%" v-if="model_active == 3">
              <el-scrollbar class="df">
                <div class="w100 df fww pb60 bsbb">
                  <div class="mt20" v-for="item in lists" draggable="true" @dragstart="startDrag($event, item)"
                    @dragend="endDrag" :item="item"
                    style="width: 270px; margin-right: 20px; height: 160px;border-radius: 8px;"
                    :style="{ 'border': item.checked ? '2px solid #00BB88' : 'none' }" :key="item"
                    @click="toDetail(item)">
                    <el-skeleton style="width: 100%;height: 120px;" :loading="item.loading" animated>
                      <template #template>
                        <div class="df w100 h100">
                          <div class="f1">
                            <el-skeleton-item variant="h3" style="width: 30%" />
                            <el-skeleton-item variant="text" style="width: 100%" />
                            <el-skeleton-item variant="text" style="width: 100%" />
                            <el-skeleton-item variant="text" style="width: 100%" />
                            <el-skeleton-item variant="text" style="width: 100%" />

                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div class="df h100 fdc type3 bsbb">
                          <div :title="item.title" style="height: 50px;color: #0C0D0E;margin-bottom: 8px;"
                            class="fw600  elli2">
                            {{ item.title }}
                          </div>
                          <div class="w100 df aic cp">
                            <div class="h100 mr10" style="
                                width: 2px;
                                background: linear-gradient(
                                  #ff8c00,
                                  #5ed6b5,
                                  #5ed6b5,
                                  #ff8c00
                                );
                              "></div>
                            <div class="f1 elli2" :title="item.summary">
                              <div style="white-space: pre-line;" v-html="md.render(item.summary ? item.summary : '')">

                              </div>
                            </div>
                          </div>
                          <div class="df aic jcsb f1">
                            <div class="df aic">
                              <img :src="item.websitUrl" style="width: 16px; height: 16px" alt="" />
                              <p style="margin-left: 8px;">{{ transDate(item.created_at) }}</p>
                            </div>
                            <el-popover trigger="click" class="box-item" title="" placement="right-start">
                              <div @click="deleteFav(item)" class="df aic cp wfc hfc">
                                <img class="create-icon" src="@/assets/imgs/del.png" alt="" />
                                <p class="ml10 fw600 fs12">删除收藏</p>
                              </div>
                              <template #reference>
                                <div v-show="!isCheckMany" class="more-2 df aic"
                                  style="font-size: 30px; transform: rotate(90deg);justify-content: flex-end;height: 20px;margin-left: 40px;">
                                  ···
                                </div>
                              </template>
                            </el-popover>
                            <div style="justify-content: flex-end" class="df pr">
                              <el-checkbox @change="boxChange" class="more-check2" v-show="isCheckMany"
                                style="z-index: 99" v-model="item.checked"></el-checkbox>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-skeleton>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="h100 df fdc" v-show="isDetail == 2">
            <div class="df aic jcsb">
              <div @click="back" class="df aic cp">
                <img src="@/assets/imgs/Frame.png" style="width: 14px; height: 14px" alt="" />
                <div class="ml10">返回</div>
              </div>
              <!-- <div class="fw600 fs12 cp">···</div> -->
              <img src="@/assets/imgs/sb.png" class="cp" style="width: 32px;" alt="">
            </div>
            <el-scrollbar style="margin-top: 16px;" class="f1">
              <el-skeleton :loading="secondLoading" style="width: 100%; height: 100% !important" animated>
                <template #template>
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px; border-radius: 8px" />

                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                    "></div>
                  <el-skeleton-item variant="image" style="
                      width: 240px;
                      height: 240px;
                      border-radius: 8px;
                      margin-top: 20px;
                    " />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                  <el-skeleton-item variant="p" style="width: 100%; margin-top: 20px" />
                </template>
                <template #default>
                  <div class="h100 df fdc">
                    <div class="df aic jcsb w100">
                      <div class="f1">
                        <div class="fs14 fw600">
                          {{ detailItem.title ? detailItem.title : "" }}
                        </div>
                        <div style="margin-top: 12px;" class="df aic">
                          <img :src="imgUrl" style="width: 16px; height: 16px" alt="" />
                          <div class="ml10">
                            {{ transDate(detailItem.created_at) }}
                          </div>
                        </div>
                      </div>
                      <div @click="openNewUrl" style="
                          background-color: #f0f4ff;
                          color: #1456f0;
                          padding: 10px 20px;
                          border-radius: 4px;
                        " class="df aic ml60 fs14 cp">
                        <img src="@/assets/imgs/Notice__icon.png" style="height: 21px" alt="" />
                        <div class="ml10">打开原文链接</div>
                      </div>
                    </div>
                    <img :src="detailItem.cover_image" style="width: 300px; border-radius: 8px; margin-top: 20px"
                      alt="" />
                    <div class="mt10" style="color: #7c8599">
                      <div style="color:  #7c8599 !important;white-space: pre-line;"
                        v-html="md.render(detailItem.summary ? detailItem.summary : '')">
                      </div>
                    </div>
                    <div class="mt20 df aic">
                      <div @click="quickReadBtn" :class="detailItem.quick_summary ? 'active' : 'normal'"
                        class="df aic cp">
                        <img src="@/assets/imgs/icon.png" style="width: 16px; height: 16px" alt="" />
                        <div style="margin-left: 8px;">速读</div>
                      </div>
                      <div @click="professionalReadBtn" :class="detailItem.personalized ? 'active' : 'normal'" style=""
                        class="df aic ml20 cp">
                        <img src="@/assets/imgs/fishionIcon.png" style="width: 16px; height: 16px" alt="" />
                        <div style="margin-left: 8px;">专业解读</div>
                      </div>
                      <div @click="customReadBtn" :class="detailItem.custom_prompt ? 'active' : 'normal'"
                        class="ml20 cp">
                        +
                      </div>
                    </div>
                    <div v-show="isQuickRead == 1" class="mt20 f1 read">
                      <div v-if="detailItem.quick_read_text">
                        <div style="white-space: pre-line;"
                          v-html="md.render(detailItem.quick_read_text ? detailItem.quick_read_text : '')">

                        </div>
                      </div>
                      <div v-else>

                      </div>
                    </div>
                    <div v-show="isQuickRead == 2" class="mt20 f1 read">
                      <div v-if="detailItem.professional_analysis_text">
                        <div style="white-space: pre-line;"
                          v-html="md.render(detailItem.professional_analysis_text ? detailItem.professional_analysis_text : '')">

                        </div>
                      </div>
                      <div v-else>

                      </div>
                    </div>
                    <div v-show="isQuickRead == 3" class="mt20 f1 read">
                      <div v-if="detailItem.custom_prompt_result_text">
                        <div style="white-space: pre-line;"
                          v-html="md.render(detailItem.custom_prompt_result_text ? detailItem.custom_prompt_result_text : '')">

                        </div>
                      </div>
                      <div v-else>

                      </div>
                    </div>
                  </div>
                </template>
              </el-skeleton>
            </el-scrollbar>
          </div>
        </div>
        <div style="box-shadow: 0 10px 10px -5px;" class="h100 chat-container w30 df fdc jcsb">
          <el-scrollbar ref="scorllContainer">
            <div ref="innerRef">
              <div v-for="item in chatsMessages" :key="item" class="df fdc">
                <div v-show="item.type == 1 && item.message" class="miao-message df mt20">
                  <img src="@/assets/imgs/miao.png" class="mr10" style="width: 32px; height: 32px" alt="" />
                  <div class="f1 miao-message-container p20 bsbb c0 fs14">
                    <div style="white-space: pre-line;" v-html="md.render(item.message ? item.message : '')"></div>
                  </div>
                </div>
                <div v-show="item.type == 2" class="df jcfe">
                  <div class="human-message df mt20">
                    <div class="f1 human-message-container p10 bsbb c0 fs14 mr10">
                      {{ item.message }}
                    </div>
                    <img src="@/assets/imgs/miao.png" style="width: 32px; height: 32px" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <div class="chat-ipt df fdc">
            <div class="mental">
              <div class="send-btn h100 bsbb df fdc jcsb">
                <div class="f1 p10">
                  <el-input v-model="sendMessage" placeholder="和喵灵聊一聊吧" class="custom-textarea"
                    type="textarea"></el-input>
                </div>
                <div class="df send">
                  <!-- <button :loading="sendLoading" class="df aic jcc w100 cp btn">
                    <template #default>
                      <img src="@/assets/imgs/Vector.png" style="width: 14px;height: 16px;" alt="">
                    </template>
                  </button> -->
                  <el-button @click="sendUserMessage" :loading="sendLoading" class="cp"
                    style="background-color: #00bb88" circle>
                    <el-icon v-if="!sendLoading" color="#fff">
                      <Top style="width: 20px;height: 22px;" />
                    </el-icon></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialog_folder" :show-close="false" width="410" align-center title="" class="custom-dialog1">
    <div class="pr">
      <img @click="cancle_create_folder" src="@/assets/imgs/close-1.png"
        style="width: 20px;height: 20px;position: absolute;right: 0;top: 0;cursor: pointer;" alt="">
      <p style="font-weight: 600;font-size: 16px;color: #0C0D0E;">新增文件夹</p>
      <el-form class="mt10 w100">
        <el-form-item>
          <el-input class="fs12" v-model="create_folder_ipt" placeholder="请输入文件夹名称"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="w100 df aic" style="justify-content: flex-end;">
            <el-button class="fs12" @click="cancle_create_folder">取消</el-button>
            <el-button class="confirm-btn fs12" :loading="create_folder_comfirm_loading" type="primary"
              @click="comfirm_create_folder">
              新建文件夹
            </el-button>
          </div>
        </el-form-item>
      </el-form>

    </div>
  </el-dialog>
  <el-dialog align-center v-model="moveVisiable" @close="cancleMove" title="移动至">
    <div class="search-folder-move df aic">
      <el-input v-model="moveSearch" :prefix-icon="Search" placeholder="搜索"></el-input>
      <el-button @click="searchMove" style="border: none;" class="bc0 cf ml10">搜索</el-button>
      <div class="history"></div>
    </div>
    <div class="df dfc mt20">
      <div class="df aic">
        <div>全部分类({{ moveOptions.length }})</div>
      </div>
    </div>
    <div style="height: 300px">
      <el-scrollbar>
        <el-tree style="max-width: 600px;background-color: #fff !important;" :data="moveOptions" :props="defaultProps">
          <template #default="{ node, data }">
            <div style="height: 30px;" class="df aic jcsb w100">
              <div @click="getNewData(data)" class="f1">{{ node.label }}</div>
              <el-radio @change="radioChange(data)" v-model="data.radio"></el-radio>
            </div>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="df aic" style="justify-content: flex-end">
      <el-button @click="cancleMove" type="info" class="mr20">取消</el-button>
      <el-button :loading="moveLoading" @click="moveToFolderTrue" class="bc0 cf">添加至文件夹</el-button>
    </div>
  </el-dialog>
  <el-dialog align-center :show-close="false" style="border-radius: 20px !important;" class="rounded-dialog"
    v-model="addFavVisiable">
    <div class="df aic pr">
      <p style="color: #0C0D0E;" class="mian-title mr20">添加收藏</p>
      <el-switch v-model="keepData" class="ml-2" inline-prompt
        style="--el-switch-on-color: #00bb88; --el-switch-off-color: #7c8599" active-text="保留数据" inactive-text="保留数据" />
      <img @click="cancleAdd" src="@/assets/imgs/close-1.png"
        style="width: 20px;height: 20px;position: absolute;right: 0;cursor: pointer; top: -15px;" alt="">
    </div>
    <p style="margin-top: 4px;" class="tal">粘贴或输入 URL链接，极速体验 AI内容解读</p>
    <input @blur="confirmUrl" @focus="successUrl = 'url-ipt'" class="ipt mt20 pl20 bsbb" spellcheck="false"
      :class="successUrl" v-model="useUrl2" placeholder="请粘贴或输入URL" />
    <div>
      <p class="tal mt20 c7">支持以下内容平台和大部分网站</p>
      <div style="margin-top: 8px;" class="df aic ">
        <div>
          <img v-show="activeImg == 1" class="img-item" src="@/assets/imgs/xhsm.png" alt="">
          <img v-show="activeImg != 1" class="img-item" src="@/assets/imgs/hxhs.png" alt="">
        </div>
        <div>
          <img v-show="activeImg == 2" class="img-item" src="@/assets/imgs/wxm.png" alt="">
          <img v-show="activeImg != 2" class="img-item" src="@/assets/imgs/hwx.png" alt="">
        </div>
        <div>
          <img v-show="activeImg == 3" class="img-item" src="@/assets/imgs/dym.png" alt="">
          <img v-show="activeImg != 3" class="img-item" src="@/assets/imgs/hdy.png" alt="">
        </div>
        <div>
          <img v-show="activeImg == 4" class="img-item" src="@/assets/imgs/blm.png" alt="">
          <img v-show="activeImg != 4" class="img-item" src="@/assets/imgs/hbl.png" alt="">
        </div>
        <div>
          <img v-show="activeImg == 5" class="img-item" src="@/assets/imgs/ttm.png" alt="">
          <img v-show="activeImg != 5" class="img-item" src="@/assets/imgs/htt.png" alt="">
        </div>
        <div>
          <img v-show="activeImg == 6" class="img-item" src="@/assets/imgs/otherm.png" alt="">
          <img v-show="activeImg != 6" class="img-item" src="@/assets/imgs/hother.png" alt="">
        </div>
        <!-- <img class="img-item" src="@/assets/imgs/hxhs.png" alt="" />
        <img class="img-item" src="@/assets/imgs/hwx.png" alt="" />
        <img class="img-item" src="@/assets/imgs/hdy.png" alt="" />
        <img class="img-item" src="@/assets/imgs/hbl.png" alt="" />
        <img class="img-item" src="@/assets/imgs/htt.png" alt="" />
        <img class="img-item" src="@/assets/imgs/hother.png" alt="" /> -->
      </div>
    </div>
    <div style="margin-bottom: 80px">
      <div class="mt20">
        <div class="df aic ai-title">
          <p style="font-size: 16px;color: #42464E;" class="mr10">AI解读设置</p>
          <p class="choose-item df aic jcc">{{ aiOption.length }}</p>
        </div>
        <el-checkbox-group style="margin-top: 12px;width: fit-content;" text-color="#00BB88" v-model="aiOption"
          size="small">
          <el-checkbox label="Option1" value="quick_summary" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">速读摘要</div>
                <div class="c7c">客观摘要，保留原文结构</div>
              </div>
            </template>
          </el-checkbox>
          <el-checkbox label="Option2" value="personalized" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">专业解读</div>
                <div class="c7c">与您职业相关的专业角度解读</div>
              </div>
            </template>
          </el-checkbox>
          <el-checkbox label="Option2" value="custom_prompt" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">自定义解读</div>
                <div class="c7c">自定义角度让喵灵解读</div>
              </div>
            </template>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="height: 300px !important;">
        <el-scrollbar height="300px">
          <div class="mt20">
            <div class="p20 bsbb bcf8 br8">
              <div style="font-size: 16px;color: #42464E;">文件夹</div>
              <el-select v-model="addFolder">
                <el-option v-for="item in options" :key="item" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="p20 bsbb bcf8 br8 mt20">
            <el-form :model="formDialog" label-position="left" label-width="100">
              <el-form-item style="color: #42464E;" label="行业/学生">
                <el-input style="color: #0c0d0e;" v-model="formDialog.type" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item style="color: #42464E;" label="职业/专业">
                <el-input style="color: #0c0d0e;" v-model="formDialog.item" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item style="color: #42464E;" label="经验">
                <el-select style="width: 248px;height: 32px;" v-model="formDialog.expirence">
                  <el-option style="color: #0c0d0e;" v-for="item in expirences" :key="item" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="aiOption.includes('custom_prompt')" class="p20 bsbb bcf8 mt20 br8 ">
            <p>自定义解读</p>
            <el-input v-model="personal2" type="textarea" :rows="4"></el-input>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="df jcfe confirm p20">
      <el-button @click="cancleAdd" type="info">取消</el-button>
      <el-button :disabled="!show" :loading="confirmAddVisiableLoading" @click="confirmAddVisiable"
        class="bc0 cf">确认</el-button>
    </div>
  </el-dialog>
  <el-dialog align-center v-model="addChildFolderVisiable" title="新增子文件夹">
    <el-input v-model="addChildIpt" placeholder="请输入文件夹名称"></el-input>
    <div class="df aic mt20" style="justify-content: flex-end">
      <el-button type="info" @click="cancleAddChild" class="mr20">取消</el-button>
      <el-button @click="confirmAddChildFolder" class="bc0 cf">确定</el-button>
    </div>
  </el-dialog>
  <el-dialog @close="closeSearchInner" :show-close="false" align-center v-model="searchVisiable">
    <div style="height: 80vh">
      <div class="df aic jcsb pr">
        <el-input v-model="searchInnerContent" class="search-inner-ipt" placeholder="请输入关键词进行搜索"></el-input>
        <img @click="closeSearchInner" src="@/assets/imgs/close.png" style="width: 20px; height: 20px" class="cp ml20"
          alt="" />
        <img @click="searchInner" src="@/assets/imgs/search-normal.png" style="
            width: 20px;
            height: 20px;
            position: absolute;
            right: 50px;
            top: 5px;
            z-index: 99;
          " alt="" />
      </div>
      <el-scorllbar height="400px">
        <div @click="toDetail(item)" style="background-color: #f8f9fa; border-radius: 8px"
          class="df aic mt10 w100 p20 bsbb cp" v-for="item in searchs">
          <img style="width: 80px; height: 80px" class="mr20"
            :src="item.cover_image + `?x-oss-process=image/resize,m_fill,w_240,h_240/crop,w_240,h_240,g_center`"
            alt="" />
          <div style="height: 80px">
            <div class="fw600 df fdc h100 f1">
              <div>{{ item.title }}</div>
              <div class="df aic mt20">
                <img style="width: 16px; height: 16px" :src="item.websitUrl" alt="" />
                <div class="ml10">
                  {{ "创建时间：" + transDate(item.created_at) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scorllbar>
    </div>
  </el-dialog>
  <el-dialog align-center v-model="readSet">
    <div style="margin-bottom: 80px">
      <!-- <div v-show="hasCOntent" class="mt20"> -->
      <!-- <div class="df aic ai-title">
          <p class="mr10">AI解读设置</p>
          <p class="choose-item df aic jcc">{{ aiOption2.length }}</p>
        </div> -->
      <!-- <el-checkbox-group class="mt20" text-color="#00BB88" v-model="aiOption2" size="small">
          <el-checkbox label="Option1" value="quick_summary" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">速读摘要</div>
                <div class="c7c">客观摘要，保留原文结构</div>
              </div>
            </template>
          </el-checkbox>
          <el-checkbox label="Option2" value="personalized" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">专业解读</div>
                <div class="c7c">与您职业相关的专业角度解读</div>
              </div>
            </template>
          </el-checkbox>
          <el-checkbox label="Option2" value="custom_prompt" border>
            <template #default>
              <div class="df fdc ml10">
                <div class="fs14 fw600 mb10 c00">自定义解读</div>
                <div class="c7c">自定义角度让喵灵解读</div>
              </div>
            </template>
          </el-checkbox>
        </el-checkbox-group> -->
      <!-- </div> -->

      <div class="mt20">
        <div v-show="isQuickRead == 2" class="p20 bsbb bcf8 br8 ">
          <el-form :model="form" label-position="left" label-width="100">
            <el-form-item label="行业/学生">
              <el-input v-model="form.type" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="职业/专业">
              <el-input v-model="form.item" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="经验">
              <el-select v-model="form.expirence">
                <el-option v-for="item in expirences" :key="item" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="isQuickRead == 3" class="p20 bsbb bcf8 mt20 br8 ">
          <p>自定义解读</p>
          <el-input v-model="personal" type="textarea" :rows="4"></el-input>
        </div>
      </div>
    </div>

    <div class="df jcfe confirm p20">
      <el-button @click="cancleSet" type="info">取消</el-button>
      <el-button @click="confirmSetRead" class="bc0 cf">确认</el-button>
    </div>
  </el-dialog>
  <el-dialog align-center v-model="renameVisiable" title="重命名">
    <el-form class="mt10">
      <el-form-item>
        <el-input class="fs12" v-model="rename_folder_ipt" placeholder="请输入文件夹名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="fs12" @click="cancle_rename_folder">取消</el-button>
        <el-button class="confirm-btn fs12" :loading="rename_folder_comfirm_loading" type="primary"
          @click="comfirm_rename_folder">
          重命名
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { Search, Plus, Top } from "@element-plus/icons-vue";
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import {
  favorites_list,
  favorites_edit,
  favorites_del,
  favorites_create,
  add_url,
  validate_url
} from "@/apis/bookmarks";
import {
  get_fav_list,
  get_fav_detail,
  get_hello,
  get_hisyory_chat,
  move_fav,
  del_fav,
  knowledge_search,
  move_batch
} from "@/apis/knowledge";
import { ElMessage, ElMessageBox } from "element-plus";
import { transDate } from "@/utils/transforDate";
import MarkdownIt from 'markdown-it';
import { get_config } from "@/apis/users";
import { get_status } from "@/apis/knowledge";
// import { useMarkdown } from "@vueuse/markdown";
// import { VueTreeList, Tree, TreeNode } from "vue-tree-list";
// import FolderItem from "@/components/FolderItem.vue";
// import { Document, Folder, FolderOpened } from "@element-plus/icons-vue";

const md = new MarkdownIt({
  breaks: true,
})

// const hasCOntent = ref(true)
const config = ref({
  personalized_options: {
    industry: '',
    profession: '',
    experience: ''
  }
})
const create_folder_ipt = ref("");
const dialog_folder = ref(false);
const create_f = ref(null);
const create_folder_comfirm_loading = ref(false);
const options = ref([]);
const model_active = ref(1);
const lists = ref([]);
const loading = ref(false);
const moveVisiable = ref(false);
const addFavVisiable = ref(false);
const sendMessage = ref("");
const chatsMessages = ref([]);
const sendLoading = ref(false);
const chooseItem = ref(0);
const isChecked = ref(false);
const addChildFolderVisiable = ref(false);
const addChildIpt = ref("");
const childFolderItem = ref({});
const isChooseAll = ref(false);
const scorllContainer = ref();
const innerRef = ref();
const isDetail = ref(1);
const secondLoading = ref(true);
const detailItem = ref({});
const imgUrl = ref("");
const isQuickRead = ref(1);
const isCheckMany = ref(false);
const searchVisiable = ref(false);
const searchInnerContent = ref("");
const searchs = ref([]);
const keepData = ref(true);
const aiOption = ref([]);
const useUrl = ref("");
const useUrl2 = ref('')
const form = ref({
  type: '',
  item: '',
  expirence: '',
});
const expirences = ref([
  { label: "初级", value: "初级" },
  { label: "中级", value: "中级" },
  { label: "资深", value: "资深" },
]);
const successUrl = ref('url-ipt')
const personal = ref('')
const readSet = ref(false);
const renameVisiable = ref(false)
const rename_folder_ipt = ref('')
const rename_folder_comfirm_loading = ref(false)
const tempItem = ref({})
const moveOptions = ref([])
const moveSearch = ref('')
const moveLoading = ref(false)
const defaultProps = {
  children: 'children',
  label: 'label',
}
const changeItem = ref({})
const move_type = ref(1)
const aiOption2 = ref([])
const temp_id = ref(0)
const addFolder = ref('')
const confirmAddVisiableLoading = ref(false)
const personal2 = ref('')
const formDialog = ref({
  type: '',
  item: '',
  expirence: '',
})
const many = ref([])
const show = ref(false)
const loading1 = ref(false)
const widthImg = ref(0)
const heightImg = ref(0)
const itemRefs = ref([])
const tempDetailItem = ref({})
const tempList = ref([])
const flag = ref(true)
const tempAll = ref([])
const activeImg = ref(0)
let temp = ref([])
const isDrag = ref(false)
const dragItem = ref({})

const getConfig = async () => {
  let data = {}
  data.session_id = JSON.parse(localStorage.getItem('session'))
  data.limit = 10
  data.offset = 0
  try {
    let res = await get_config(data)
    console.log(res);
    if (res.data.code == 200) {
      config.value = res.data.data
    }
  } catch (e) {
    console.log(e);
  }
}


const startDrag = (e, item) => {
  dragItem.value = item
}
const onDrop = (e) => {
  isDrag.value = true
  moveVisiable.value = true
  moveOptions.value = options.value
  many.value.push(dragItem.value)
  moveOptions.value = moveOptions.value.map(item => {
    item.radio = false
    return item
  })
  move_type.value = 2
  // moveToFolderTrue()
}
const moveToFolderChild = (e) => {
  move_type.value = 1
  tempItem.value = e
  moveVisiable.value = true
  moveOptions.value = options.value
  moveOptions.value = moveOptions.value.map(item => {
    item.radio = false
    return item
  })
};

const moveToFolderTrue = async () => {
  moveLoading.value = true
  if (JSON.stringify(changeItem.value) == '{}') {
    ElMessage.error('请选择需要移动到的文件夹')
    moveLoading.value = false
    return
  }
  if (move_type.value == 1) {
    try {
      let data = {}
      data.parent_id = changeItem.value.id
      let move_res = await favorites_edit(tempItem.value.id, data)
      if (move_res.data.code == 200) {
        ElMessage.success('成功')
        moveSearch.value = ''
        moveVisiable.value = false
        moveLoading.value = false
        get_collection_list()
        moveOptions.value.forEach(item => {
          item.radio = false
        })
      } else {
        moveLoading.value = false
        ElMessage.error(move_res.data.message)
      }
    } catch (e) {
      moveLoading.value = false

    }
  } else {
    let data = {}
    data.favorite_id = changeItem.value.id
    data.knowledge_ids = many.value.map(item => item.id)
    try {
      let move_res = await move_batch(data)
      if (move_res.data.code == 200) {
        moveLoading.value = false
        ElMessage.success('成功')
        moveVisiable.value = false
        get_collection_list()
        getFavList(localStorage.getItem('currFav') ? JSON.parse(localStorage.getItem('currFav')).id : 0)
        many.value = []
        dragItem.value = {}
        isChooseAll.value = false;
        isCheckMany.value = false;
        isChecked.value = false
      } else {
        ElMessage.error(move_res.data.message)
        moveLoading.value = false
      }
    } catch (e) {
      moveLoading.value = false
      console.log(e);
    }
  }
}

const cancle_rename_folder = () => {
  rename_folder_ipt.value = ''
  renameVisiable.value = false
}
const rename = (e) => {
  renameVisiable.value = true
  tempItem.value = e
}

const confirmAddVisiable = async () => {
  confirmAddVisiableLoading.vlaue = true
  if (!useUrl2.value) {
    ElMessage.info('请输入收藏URL')
    return
  }
  let data = {
    personalized_options: {
      industry: '',
      profession: '',
      experience: ''
    }
  }
  data.url = useUrl2.value
  if (aiOption.value.includes('quick_summary')) {
    data.quick_summary = 1
  }
  if (aiOption.value.includes('personalized')) {
    data.personalized = 1
  }
  if (aiOption.value.includes('custom_prompt')) {
    data.custom_prompt = 1
  }
  if (aiOption.value.includes('personalized')) {
    if (!formDialog.value.type) {
      ElMessage.info('请填写您的行业')
      loading.value = false
      return
    }
    if (!formDialog.value.item) {
      ElMessage.info('请填写您的专业')
      loading.value = false
      return
    }
    if (!formDialog.value.expirence) {
      ElMessage.info('请填写您的从业经验')
      loading.value = false
      return
    }
  }
  // if (aiOption.value.includes('custom_prompt')) {
  //   if (!personal2.value) {
  //     ElMessage.info('请填写自定义解读内容')
  //     loading.value = false
  //     return
  //   }
  // }
  data.personalized_options.industry = formDialog.value.type
  data.personalized_options.profession = formDialog.value.item
  data.personalized_options.experience = formDialog.value.expirence
  data.custom_prompt_text = personal2.value
  try {
    let add_res = await add_url(data)
    if (add_res.data.code == 200) {
      ElMessage.success('成功')
      confirmAddVisiableLoading.value = false
      addFavVisiable.value = false
      aiOption.value = []
      useUrl.value = ''
      get_collection_list()
      getFavList(localStorage.getItem('currFav') ? JSON.parse(localStorage.getItem('currFav')).id : 0)
    } else {
      ElMessage.error(add_res.data.message)
      confirmAddVisiableLoading.value = false
    }
  } catch (e) {
    confirmAddVisiableLoading.value = false
  }
}

const cancleAdd = () => {
  addFavVisiable.value = false
  aiOption.value = []
  useUrl.value = ''
  form.value.type = ''
  form.value.item = ''
  form.value.expirence = ''
  personal2.value = ''
}

const searchMove = () => {
  if (!moveSearch.value) {
    moveOptions.value = options.value
  }
  moveOptions.value = moveOptions.value.filter(item => item.name.includes(moveSearch.value))
  moveOptions.value = moveOptions.value.map(item => {
    item.radio = false
    return item
  })
}

const comfirm_rename_folder = async () => {
  rename_folder_comfirm_loading.value = true
  try {
    let data = {}
    data.name = rename_folder_ipt.value
    let rename_res = await favorites_edit(tempItem.value.id, data)
    if (rename_res.data.code == 200) {
      ElMessage.success('成功')
      get_collection_list()
      cancle_rename_folder()
    }
  } catch (e) {

  }
}

const openNewUrl = () => {
  window.open(detailItem.value.url, "_blank");
};

const checkAll = () => {
  getFavList(localStorage.getItem('currFav') ? JSON.parse(localStorage.getItem('currFav')).id : 0)
}
const checkWx = () => {
  lists.value = tempAll.value.filter(item => item.website == 'weixin')
}
const checkXhs = () => {
  lists.value = tempAll.value.filter(item => item.website == 'xiaohongshu')
}
const checkBli = () => {
  lists.value = tempAll.value.filter(item => item.website == 'bilibili')
}
const checkDy = () => {
  lists.value = tempAll.value.filter(item => item.website == 'douyin')
}
const checkTt = () => {
  lists.value = tempAll.value.filter(item => item.website == 'toutiao')
}
const checkOther = () => {
  lists.value = tempAll.value.filter(item => item.website == 'other')
}

const sortList = () => {
  flag.value = !flag.value
  if (flag.value) {
    lists.value = [...lists.value].sort((a, b) =>
      new Date(a.created_at) - new Date(b.created_at)
    );
  } else {
    // 2. 降序（从晚到早）
    lists.value = [...lists.value].sort((a, b) =>
      new Date(b.created_at) - new Date(a.created_at)
    );
  }
}

onMounted(async () => {
  get_collection_list();
  getFavList(localStorage.getItem('currFav') ? JSON.parse(localStorage.getItem('currFav')).id : 0);
  hello();
  getHistory();
  getConfig()
  await nextTick()
  setTimeout(() => {
    itemRefs.value.forEach((el, index) => {
      if (el) {
        const rect = el.getBoundingClientRect()
        widthImg.value = parseInt(rect.width)
        heightImg.value = parseInt(rect.height)
        // console.log(`项目 ${index} 尺寸:`, rect.width, rect.height)
      }
    })
  }, 200)
  //  nextTick(()=>{
  //    bcImgRefs.value.forEach(async(el, index) => {
  //      console.log(el);
  //      if (el) {
  //        const rect = await el.getBoundingClientRect()
  //        widthImg.value = rect.width
  //        heightImg.value = rect.height
  //        // console.log(`bc-img ${index} 的宽高:`, rect.width, rect.height)
  //      }
  //    })
  //  })
});
const setItemRef = (el, index) => {
  if (el) {
    itemRefs.value[index] = el
  }
}

const cancleMove = () => {
  isDrag.value = false
  dragItem.value = {}
  moveSearch.value = ''
  moveVisiable.value = false
}

const cancleSet = () => {
  form.value.type = ''
  form.value.item = ''
  form.value.expirence = ''
  personal.value = ''
  readSet.value = false
}

const confirmSetRead = async () => {
  if (temp.value.includes('personalized')) {
    aiOption2.value.push('personalized')
  }
  if (temp.value.includes('custom_prompt')) {
    aiOption2.value.push('custom_prompt')
  }
  let data = {
    personalized_options: {
      industry: '',
      profession: '',
      experience: ''
    }
  }
  data.url = detailItem.value.url
  if (aiOption2.value.includes('quick_summary')) {
    data.quick_summary = 1
  }
  if (aiOption2.value.includes('personalized')) {
    data.personalized = 1
  }
  if (aiOption2.value.includes('custom_prompt')) {
    data.custom_prompt = 1
  }
  if (aiOption2.value.includes('personalized')) {
    if (!form.value.type) {
      ElMessage.info('请填写您的行业')
      loading.value = false
      return
    }
    if (!form.value.item) {
      ElMessage.info('请填写您的专业')
      loading.value = false
      return
    }
    if (!form.value.expirence) {
      ElMessage.info('请填写您的从业经验')
      loading.value = false
      return
    }
  }
  if (aiOption2.value.includes('custom_prompt')) {
    if (!personal.value) {
      ElMessage.info('请填写自定义解读内容')
      loading.value = false
      return
    }
  }
  data.personalized_options.industry = form.value.type
  data.personalized_options.profession = form.value.item
  data.personalized_options.experience = form.value.expirence
  data.custom_prompt_text = personal.value
  try {
    let add_res = await add_url(data)
    if (add_res.data.code == 200) {
      ElMessage.success('成功')
      readSet.value = false
      let obj = {}
      obj.id = temp_id.value
      let detail_res = await get_fav_detail(obj);
      if (detail_res.data.code == 200) {
        secondLoading.value = false;
        detailItem.value = detail_res.data.data;
        if (detailItem.value.quick_summary) {
          aiOption2.value.push('quick_summary')
        }
        if (detailItem.value.personalized) {
          aiOption2.push('personalized')
        }
        if (detailItem.value.custom_prompt) {
          aiOption2.value.push('custom_prompt')
        }
        switch (detailItem.value.website) {
          case "xiaohongshu":
            imgUrl.value = "/xhsm.png";
            break;
          case "weixin":
            imgUrl.value = "/wxm.png";
            break;
          case "douyin":
            imgUrl.value = "/dym.png";
            break;
          case "bilibili":
            imgUrl.value = "/blm.png";
            break;
          case "toutiao":
            imgUrl.value = "/ttm.png";
            break;
          case "other":
            imgUrl.value = "/otherm.png";
            break;
          case "":
            imgUrl.value = "/otherm.png";
        }
      }
    }
  } catch (e) {

  }
}

const checkUrl = async () => {
  let data = {}
  data.url = useUrl2.value
  try {
    let vali_res = await validate_url(data)
    if (vali_res.data.code == 200) {
      ElMessage.success('验证成功，再次点击确认收藏')
    }
    if (vali_res.data.data.is_accessible) {
      loading1.value = false
      show.value = true
      successUrl.value = 'url-ipt'
    } else {
      loading1.value = false
      successUrl.value = 'error-ipt'
    }
    switch (vali_res.data.data.site_type) {
      case 'xiaohongshu':
        activeImg.value = 1
        activeImgUrl.value = '/xhsm.png'
        break
      case 'weixin':
        activeImg.value = 2
        activeImgUrl.value = '/wxm.png'
        break
      case 'douyin':
        activeImg.value = 3
        activeImgUrl.value = '/dym.png'
        break
      case 'bilibili':
        activeImg.value = 4
        activeImgUrl.value = '/blm.png'
        break
      case 'toutiao':
        activeImg.value = 5
        activeImgUrl.value = '/ttm.png'
        break
      case 'other':
        activeImg.value = 6
        activeImgUrl.value = '/otherm.png'
        break
    }
  } catch (e) {
    loading1.value = false
    console.log(e);
  }
}

const confirmUrl = async () => {
  loading1.value = true
  if (!useUrl2.value) {
    ElMessage.error('输入或粘贴的url不能为空')
    loading1.value = false
    return
  }
  checkUrl()
}


const found = (arr) => {
  deep += 1;
  for (let i = 0; i < arr.length; i++) {
    arr[i].deep = deep;
    if (arr[i].children.length > 0) {
      found(arr[i].children);
    } else {
      deep = 1;
    }
  }
};

const quickReadBtn = () => {
  isQuickRead.value = 1;
  if (!tempDetailItem.value.quick_summary) {
    ElMessageBox.confirm('确定开启速读吗？', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      // readSet.value = true;
      aiOption2.value.push('quick_summary')
      form.value.type = config.value.personalized_options.industry
      form.value.item = config.value.personalized_options.profession
      form.value.expirence = config.value.personalized_options.experience
      confirmSetRead()
    }).catch(() => {
      ElMessage.info('取消')
    })
  }

};

const professionalReadBtn = () => {
  temp.value = []
  temp.value.push('personalized')
  isQuickRead.value = 2;
  readSet.value = true;
  form.value.type = config.value.personalized_options.industry
  form.value.item = config.value.personalized_options.profession
  form.value.expirence = config.value.personalized_options.experience

};

const customReadBtn = () => {
  temp.value = []
  temp.value.push('custom_prompt')
  isQuickRead.value = 3;
  readSet.value = true;
  form.value.type = config.value.personalized_options.industry
  form.value.item = config.value.personalized_options.profession
  form.value.expirence = config.value.personalized_options.experience
};

const closeSearchInner = () => {
  searchInnerContent.value = "";
  searchVisiable.value = false;
  searchs.value = [];
};

const addFav = () => {
  addFavVisiable.value = true
  formDialog.value.type = config.value.personalized_options.industry
  formDialog.value.item = config.value.personalized_options.profession
  formDialog.value.expirence = config.value.personalized_options.experience
}

const searchInner = async () => {
  searchFav();
};
const moveToFolder = () => {
  moveOptions.value = options.value
  move_type.value = 2
  many.value = [];
  many.value = lists.value.filter((item) => item.checked);
  if (many.value.length <= 0) {
    ElMessage.info("请选择需要移动的收藏");
    return;
  }
  moveVisiable.value = true;
};

const radioChange = (e) => {
  changeItem.value = e
}


const deepChild = (arr) => {
  arr.forEach((item) => {
    item.changeName = true;
    item.open = false;
    item.show = false;
    item.label = item.name
    item.isSHowMenuItem = false
    item.radio = false
    if (item.children.length > 0) {
      deepChild(item.children);
    }
  });
};
const openSearch = () => {
  searchVisiable.value = true;
};

const boxChange = () => {
  let temp = [];
  temp = lists.value.filter((item) => item.checked);
  if (temp.length > 0) {
    chooseItem.value = temp.length;
    isChecked.value = true;
  } else {
    chooseItem.value = 0;
    isChecked.value = false;
  }
};
const chooseAll = () => {
  lists.value = lists.value.map((item) => {
    item.checked = true;
    return item;
  });
  chooseItem.value = lists.value.length;
  isChecked.value = true;
};

const chooseAllChange = (e) => {
  if (e) {
    lists.value = lists.value.map((item) => {
      item.checked = true;
      return item;
    });
    chooseItem.value = lists.value.length;
  } else {
    lists.value = lists.value.map((item) => {
      item.checked = false;
      return item;
    });
    chooseItem.value = 0;
  }
};
const chooseMany = () => {
  isChooseAll.value = true;
  isCheckMany.value = true;
};

// 获取全部收藏夹
const get_collection_list = async (id) => {
  try {
    let list_res = await favorites_list();
    if (list_res.data.data && list_res.data.data.length > 0) {
      options.value = list_res.data.data;
      deepChild(options.value);
    }
  } catch (e) { }
};

const cancle_create_folder = () => {
  create_folder_ipt.value = "";
  dialog_folder.value = false;
};

const comfirm_create_folder = async () => {
  if (!create_folder_ipt.value) {
    ElMessage.error("文件夹名称不能为空");
    return;
  }
  create_folder_comfirm_loading.value = true;
  let data = {};
  data.name = create_folder_ipt.value;
  try {
    let create_res = await favorites_create(data);
    if (create_res.data.code == 200) {
      ElMessage.success("创建成功");
      create_folder_ipt.value = "";
      dialog_folder.value = false;
      create_folder_comfirm_loading.value = false;
      get_collection_list();
    } else {
      ElMessage.error("创建失败" + create_res.data.message);
      create_folder_comfirm_loading.value = false;
    }
  } catch (e) {
    ElMessage.error(e);
    console.log(e);
  }
};


const create_folder_by_icon = async () => {
  await nextTick();
  create_f.value.click();
};

const toDetail = async (e) => {
  tempDetailItem.value = e
  hello(e.id)
  searchVisiable.value = false;
  isDetail.value = 2;
  let data = {};
  temp_id.value = e.id
  data.id = e.id;
  try {
    let detail_res = await get_fav_detail(data);
    if (detail_res.data.code == 200) {
      secondLoading.value = false;
      detailItem.value = detail_res.data.data;
      if (detailItem.value.quick_summary) {
        aiOption2.value.push('quick_summary')
      }
      if (detailItem.value.personalized) {
        aiOption2.value.push('personalized')
      }
      if (detailItem.value.custom_prompt) {
        aiOption2.value.push('custom_prompt')
      }
      switch (detailItem.value.website) {
        case "xiaohongshu":
          imgUrl.value = "/xhsm.png";
          break;
        case "weixin":
          imgUrl.value = "/wxm.png";
          break;
        case "douyin":
          imgUrl.value = "/dym.png";
          break;
        case "bilibili":
          imgUrl.value = "/blm.png";
          break;
        case "toutiao":
          imgUrl.value = "/ttm.png";
          break;
        case "other":
          imgUrl.value = "/otherm.png";
          break;
        case "":
          imgUrl.value = "/otherm.png";
      }
    }
  } catch (e) {
    console.log(e);
  }
};

const getFavList = async (id) => {
  let data = {};
  if (id) {
    data.id = id
  } else {
    data.id = 0;
  }
  data.page = 1;
  data.page_size = 20;
  try {
    let list_res = await get_fav_list(data);
    if (list_res.data.code == 200) {
      lists.value = list_res.data.data.items
      if (lists.value.length > 0) {
        lists.value = lists.value.map((item) => {
          item.loading = true
          switch (item.website) {
            case "xiaohongshu":
              item.websitUrl = "/xhsm.png";
              break;
            case "weixin":
              item.websitUrl = "/wxm.png";
              break;
            case "douyin":
              item.websitUrl = "/dym.png";
              break;
            case "bilibili":
              item.websitUrl = "/blm.png";
              break;
            case "toutiao":
              item.websitUrl = "/ttm.png";
              break;
            case "other":
              item.websitUrl = "/otherm.png";
              break;
            case "":
              item.websitUrl = "/otherm.png";
          }
          return item;
        });
        lists.value = lists.value.reverse()
        tempAll.value = lists.value
        for (const item of lists.value) {
          try {
            const res = await getLoadingStatus(item.id);

            if (res?.status === 0) {
              // 启动轮询并保存清理函数
              tempList.value.push(item.id);
            } else {
              item.loading = false;
            }
          } catch (e) {
            console.error('处理项目出错:', item.id, e);
            item.loading = false;
          }
        }
        for (const item of tempList.value) {
          try {
            const res = await getLoadingStatus(item);
            console.log('初始状态检查:', res);

            if (res?.status === 0) {
              pollStatus(item); // 启动轮询
            } else {
              // 如果状态不是0，直接更新
              lists.value = lists.value.map(obj =>
                obj.id === item.id ? { ...obj, loading: false } : obj
              );
              tempAll.value = lists.value
            }
          } catch (e) {
            console.error('处理项目出错:', item, e);
          }
        }
      }
    }
  } catch (e) {
    console.log(e);
  }
};

const pollStatus = async (id) => {
  const checkStatus = async () => {
    try {
      const result = await get_status(id);
      console.log('轮询结果:', result);

      if (result.data.data.status === 0) {
        setTimeout(checkStatus, 3000); // 继续轮询
      } else {
        console.log('轮询成功，更新状态', id);
        // 使用map创建新数组确保响应式更新
        lists.value = lists.value.map(obj =>
          obj.id === id ? { ...obj, loading: false } : obj
        );
        tempAll.value = lists.value
        // 刷新列表
        setTimeout(() => {
          getFavList(
            localStorage.getItem('currFav')
              ? JSON.parse(localStorage.getItem('currFav')).id
              : 0
          );

        }, 4000)
      }
    } catch (e) {
      console.error('轮询出错:', e);
      // 可以添加重试逻辑
    }
  };

  checkStatus(); // 开始轮询
};
const getLoadingStatus = async (id) => {
  try {
    const res = await get_status(id);
    return res.data.data; // 统一返回数据，由调用方判断status
  } catch (e) {
    console.error('获取状态出错:', e);
    throw e; // 重新抛出错误以便外层捕获
  }
};

const hello = async (id) => {
  try {
    let hello
    if (id) {
      hello = await get_hello({ knowledge_id: id })
    } else {
      hello = await get_hello({});
    }
    if (hello.data.code == 200) {
      localStorage.setItem(
        "session",
        JSON.stringify(hello.data.data.session_id)
      );
      let obj = {};
      obj.type = 1;
      obj.message = hello.data.data.greeting;
      chatsMessages.value.push(obj);
    }
  } catch (e) {
    console.log(e);
  }
};

const deleteFav = async (item) => {
  ElMessageBox.confirm("确定要删除吗？删除之后不能恢复", "删除提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
  })
    .then(async () => {
      let data = {};
      data.id = item.id;
      try {
        let del_res = await del_fav(data);
        if (del_res.data.code == 200) {
          ElMessage.success("删除成功");
          getFavList(localStorage.getItem('currFav') ? JSON.parse(localStorage.getItem('currFav')).id : 0);
        }
      } catch (e) {
        console.log(e);
      }
    })
    .catch(() => {
      ElMessage.info("已取消");
    });
};

const changeViews = () => {
  switch (model_active.value) {
    case 1:
      model_active.value = 2;
      break;
    case 2:
      model_active.value = 3;
      break;
    case 3:
      model_active.value = 1;
      break;
  }
};

const sendUserMessage = async () => {
  let transText = sendMessage.value;
  let obj = {};
  sendLoading.value = true;
  obj.type = 2;
  obj.message = sendMessage.value;
  chatsMessages.value.push(obj);
  sendMessage.value = "";
  try {
    const url = "http://test.agentmiao.com/api/chat/stream";
    const token = JSON.parse(localStorage.getItem("token"));
    const resp = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        token: token,
      },
      body: JSON.stringify({
        message: transText,
        session_id: JSON.parse(localStorage.getItem("session")),
      }),
    });
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();
    let child = ref({});
    child.value.type = 1;
    child.value.message = "";
    chatsMessages.value.push(child.value);
    let buffer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        transText = "";
        sendLoading.value = false;
        break;
      }

      // 解码并添加到缓冲区
      buffer += decoder.decode(value);

      // 处理缓冲区中的所有完整消息
      while (buffer.includes("\n\n")) {
        // 提取第一条完整消息
        const messageEnd = buffer.indexOf("\n\n");
        let message = buffer.substring(0, messageEnd).trim();
        buffer = buffer.substring(messageEnd + 2);

        // 跳过空消息
        if (!message) continue;

        // 处理SSE格式的消息
        if (message.startsWith("data: ")) {
          try {
            const jsonStr = message.substring(6); // 去掉"data: "
            const data = JSON.parse(jsonStr);

            if (data.type === "content" && data.content) {
              chatsMessages.value[chatsMessages.value.length - 1].message += data.content;
              scorllContainer.value.setScrollTop(innerRef.value.clientHeight);
            }
          } catch (e) {
            console.error("解析JSON失败:", e);
          }
        }
      }
    }
  } catch (e) { }
};

const getNewData = (e) => {
  localStorage.setItem('currFav', JSON.stringify(e))
  getFavList(e.id)
}
const delete_folder = (e) => {
  ElMessageBox.confirm("确定删除此文件夹吗？删除后不可恢复", "删除提示", {
    confirmButtonText: "删除文件夹",
    cancelButtonText: "取消",
  }).then(async () => {
    let data = {};
    data.id = e.id;
    try {
      let del_res = await favorites_del(data);
      if (del_res.data.code == 200) {
        ElMessage.success("删除成功");
        get_collection_list();
      }
    } catch (e) {
      console.log(e);
    }
  });
};

const cancleAddChild = () => {
  addChildIpt.value = "";
  addChildFolderVisiable.value = false;
};

const addChildFolder = (e) => {
  addChildFolderVisiable.value = true;
  childFolderItem.value = e;
};

const confirmAddChildFolder = async () => {
  let data = {};
  data.name = addChildIpt.value;
  data.parent_id = childFolderItem.value.id;
  try {
    let add_res = await favorites_create(data);
    if (add_res.data.code == 200) {
      ElMessage.success("新增成功");
      addChildFolderVisiable.value = false;
      addChildIpt.value = "";
      get_collection_list();
    }
  } catch (e) {
    console.log(e);
  }
};

const handleSizeChange = (size) => {
  console.log('当前尺寸:', size)
}
// const initResizeObserver = (el, index) => {
//   if (!el) return

//   // 清除旧的观察器
//   if (observers.value[index]) {
//     observers.value[index].disconnect()
//   }

//   // 创建新的观察器
//   const observer = new ResizeObserver(entries => {
//     entries.forEach(entry => {
//       const { width, height } = entry.contentRect
//       console.log(`bc-img ${index} 尺寸变化:`, width, height)
//       if(width !==0 && height !==0){
//         observers.value.forEach(obs => obs?.disconnect())
//       }
//       // widthImg.value = width
//       // heightImg.value = height
//       // 可以在这里存储尺寸数据或触发自定义事件
//     })
//   })

//   observer.observe(el)
//   observers.value[index] = observer
// }
// onBeforeUnmount(() => {
//   // 组件销毁时清理所有观察器
//   observers.value.forEach(obs => obs?.disconnect())
// })
// const handleLoad = (event, index)=>{

//   const img = event.target;
//   setTimeout(()=>{
//     widthImg.value = img.width
//   heightImg.value = img.height
//   })

//   // console.log(`图片 ${index} 尺寸:`, {
//   //   natural: {
//   //     width: img.naturalWidth,
//   //     height: img.naturalHeight
//   //   },
//   //   displayed: {
//   //     width: img.width,
//   //     height: img.height
//   //   }
//   // });

// }
const closeChooseAll = () => {
  isChooseAll.value = false;
  isCheckMany.value = false;
  many.value = []
  isChecked.value = false
  lists.value = lists.value.map(item => {
    item.checked = false
    return item
  })
};

const getHistory = async () => {
  let data = {};
  data.session_id = JSON.parse(localStorage.getItem("session"));
  data.limit = 10;
  data.offset = 0;
  try {
    let history_res = await get_hisyory_chat(data);
  } catch (e) {
    console.log(e);
  }
};

const searchFav = async () => {
  if (!searchInnerContent.value) {
    ElMessage.info("搜索内容不能为空");
    return;
  }
  let data = {};
  data.q = searchInnerContent.value;
  try {
    let search_res = await knowledge_search(data);
    if (search_res.data.code == 200) {
      searchs.value = search_res.data.data.items;
      searchs.value = searchs.value.map((item) => {
        switch (item.website) {
          case "xiaohongshu":
            item.websitUrl = "../../src/assets/imgs/xhsm.png";
            break;
          case "weixin":
            item.websitUrl = "../../src/assets/imgs/wxm.png";
            break;
          case "douyin":
            item.websitUrl = "../../src/assets/imgs/dym.png";
            break;
          case "bilibili":
            item.websitUrl = "../../src/assets/imgs/blm.png";
            break;
          case "toutiao":
            item.websitUrl = "../../src/assets/imgs/ttm.png";
            break;
          case "other":
            item.websitUrl = "../../src/assets/imgs/otherm.png";
            break;
          case "":
            item.websitUrl = "../../src/assets/imgs/otherm.png";
        }
        return item;
      });
    }
  } catch (e) {
    console.log(e);
  }
};


const back = () => {
  isDetail.value = 1;
  isQuickRead.value = 1;
};



</script>
<style lang="scss" scoped>
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.active {
  background-color: #00bb88;
  color: #fff;
  width: fit-content;
  height: fit-content;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
}

.spin-animation {
  animation: spin 2s linear infinite;
}

.logo {
  width: 4%;
  // height: 40PX;
  margin-right: 20px;
}

.logo2 {
  width: 4%;
  margin-right: 10px;
}

.logo3 {
  width: 4%;
}

.avater {
  width: 32px;
  height: 32px;
  margin-left: 20px;
}

.icon-folder {
  width: 20px;
}

.w20 {
  width: 15%;
}

.view-mian-header {
  padding-bottom: 20px;
  border-bottom: 2px solid #1f232926;
  margin-bottom: 20px;
}

.w50 {
  width: 75%;
  background-color: #fff;
  border-radius: 20px;
}

.bc0 {
  background-color: #00bb88;
}

.w30 {
  width: 340px;
  background-color: #fff;
  border-radius: 20px;
}

.icon {
  width: 16px;
  height: 16px;
}

.collection-img {
  width: 20px;
  height: 20px;
}

.add-collection {
  background-color: #000000;
  height: fit-content;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.add-text {
  margin: 0 0 0 10px;
}

.create-icon {
  width: 16px;
  height: 16px;
}

.normal {
  background-color: #ebeef5;
  color: #7c8599;
  width: fit-content;
  height: fit-content;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
}

.confirm-btn {
  background-color: #00bb88;
  border: none;
  outline: none;
}

.dialog-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.custom-dialog .el-dialog__header {
  font-size: 10px !important;
}

.skeleton-main {
  width: 30%;
  position: relative;
  border-radius: 20px;
  border-color: red;
  border: 1px solid #dee0e3;
  overflow: hidden;
}

.more-check {
  width: 56px !important;
  position: absolute;
  right: -40px;
  top: 0;
}

.custom-dialog1 {
  height: 186px !important;
}

.real-main {
  width: 100%;
  border-radius: 20px;
  height: 100%;
  position: relative;
  // border: 1px solid #dee0e3;
}

.bc-img {
  // border-radius: 20px 20px 0 0;
  background-color: #ebeef5;
  height: 120px;
}

.mian-container {
  flex: 1;
  box-sizing: border-box;
}

.more {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 30px;
  // transform: rotate(90deg);
  cursor: pointer;
}

.more-2 {
  font-size: 30px;
  transform: rotate(90deg);
  cursor: pointer;
}

.chat-container {
  // position: relative;
  padding: 22px 20px 20px 20px;
  box-sizing: border-box;
}

.chat-ipt {
  width: 100%;
  // padding: 20px;
  // box-sizing: border-box;
  height: 150px;
  // position: absolute;
  left: 0;
  bottom: 0;
  // border: 1px solid;
  background: linear-gradient(90deg, #ff8c00, #5ed6b5, #5ed6b5, #ff8c00);
  border: none;
  padding: 1px;
  box-sizing: border-box;
  border-radius: 20px;
}

.search-inner-ipt>input {
  padding-left: 40px !important;
}

.send {
  padding: 0 10px 10px 0;
  box-sizing: border-box;
  width: 100%;
  // height: 32px;
  // background-color: #00BB88;
  border-radius: 100%;
  justify-content: flex-end;
}

.mental {
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  border-radius: 20px;
}

.btn {
  width: 28px;
  height: 28px;
  background-color: #00bb88;
  border-radius: 100%;
}

.custom-textarea {
  height: 100%;
  border: none;
  outline: none;
}

.miao-message {
  width: 80%;
  align-items: flex-start;
}

.human-message {
  width: 80%;
  // align-items: flex-end;
  // justify-content: flex-end;
}

.miao-message-container {
  border-radius: 8px;
  background: linear-gradient(rgba(161, 214, 107, .3), rgba(92, 214, 186, .3), rgba(92, 214, 186, .3));
}

.human-message-container {
  background-color: #5ed6b5;
  color: #0c0d0e;
  border-radius: 8px;
}

.chat-content {
  overflow-y: scroll;
  transform: translateY(0.3);
}

.el-button {
  border: none;
}

.rounded-dialog {
  border-radius: 20px !important;
  overflow: hidden;
}

.elli {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.elli2 {
  height: 50px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.elli1 {
  height: 50px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}


.type3 {
  background-color: #f0f4ff;
  border-radius: 8px;
  padding: 10px;
}

.search-mentel {
  height: 400px;
}

.content-footer {
  background-color: #fff;
  border-radius: 0 0 20px 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.small-item {
  font-size: 12px;
  background-color: #2e32380d;
  cursor: pointer;
  padding: 10px;
  margin-right: 10px;
  border-radius: 4px;
}

.search-icon {
  position: absolute;
  left: 25px;
  top: 25%;
  z-index: 9999;
  cursor: pointer;
}

.read {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.content {
  overflow: hidden;
}

.url-ipt {
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 10px;
  border: 1px solid #409EFF;
  border-radius: 4px;

}

.error-ipt {
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 10px;
  border: 1px solid red;
  border-radius: 4px;
  color: red;
}

// :deep(.el-input__wrapper) {
//   padding-left: 30px;
// }

.logo {
  width: 3%;
  margin-right: 20px;
}

.logo2 {
  width: 5%;
  margin-right: 10px;
}

.logo3 {
  width: 11%;
}

.user-main {
  background-image: url("@/assets/imgs/banner.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin-top: 10px;
}

.mian {
  background-color: #fff;
  position: relative;
  width: 50%;
  // padding: 20px;
  height: 300px;
  // overflow-y: scroll;
  box-sizing: border-box;
  box-shadow: 0 40px 10px -5px;
  border-radius: 20px;
  // padding-bottom: 60px;
  box-sizing: border-box;
}

.img-item {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.c7 {
  color: #7c8599;
}

.mian-title {
  font-size: 20px;
  font-weight: 600;
}

.ipt {
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}

.confirm {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #c9cdd44d;
  background-color: #fff;
  border-radius: 0 0 20px 20px;
  z-index: 999;
}

.url-ipt {
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 10px;
  border: 1px solid #409eff;
  border-radius: 4px;
}

:deep(.el-checkbox__inner)::after {
  border: 2px solid #fff !important;
  border-left: 0 !important;
  border-top: 0 !important;
  height: 10px !important;
  left: 6px !important;
  width: 5px !important;
}

.error-ipt {
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 10px;
  border: 1px solid red;
  border-radius: 4px;
  color: red;
}

.more-check2 {
  position: absolute;
  bottom: -30px;
  right: 25px;
}

.icons {
  opacity: 0;
}

.icons:hover {
  opacity: 1;
}

.choose-item {
  border-radius: 100%;
  background-color: #41464f;
  color: #fff;
  width: 18px;
  height: 18px;
  font-weight: 700;
}

.container-main {
  height: 100px;
}

:deep(.is-leaf) {
  visibility: visible !important;
  color: #a8abb2 !important;
  cursor: pointer;
}

:deep(.el-tree-node__content) {
  margin-top: 10px;
}

:deep(.el-dialog__header) {
  font-weight: 600 !important;
}

:deep(.el-switch__core) {
  border-radius: 3px !important;
  padding: 0 5px;
}

:deep(.el-switch__action) {
  width: 5px;
  border-radius: 3px !important;
  left: 5px;
}

:deep(.el-checkbox-group) {
  height: 56px !important;
  display: flex;
  justify-content: space-between;
}

:deep(.el-checkbox) {
  height: 56px !important;
  width: 30%;
  border-radius: 8px !important;
  border-color: #00bb88 !important;
  margin-right: 16px !important;
}

:deep(.el-checkbox__inner) {
  // background-color:  #00BB88 !important;
  border-color: #00bb88 !important;
}

// :deep(.el-checkbox > .is-checked){
//     background-color:  #00BB88 !important;
// }
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00bb88 !important;
  border-color: #00bb88 !important;
}

:deep(.el-scrollbar) {
  flex: 1;
  margin-bottom: 10px;
  padding: 10px;
}

:deep(.el-scrollbar__wrap) {
  height: 100% !important;
  width: 100%;
}

:deep(.el-textarea__inner) {
  height: 100% !important;
  border: none !important;
  box-shadow: none;
  resize: none;
}

:deep(.el-collapse) {
  background-color: #ebeff8;
}

:deep(.el-collapse-item__header) {
  background-color: #ebeff8 !important;
}

:deep(.el-collapse-item__content) {
  background-color: #ebeff8 !important;
}

:deep(.el-form-item__content) {
  color: #0c0d0e !important;
}

:deep(.el-form-item__label) {
  color: #42464e !important;
}

:deep(.el-collapse-item) {
  height: 40px;
}

:deep(.el-skeleton) {
  border-radius: 20px !important;
  height: 300px !important;
  display: flex;
  flex-direction: column;
}


:deep(.el-skeleton__image) {
  // border-radius: 20px 20px 0 0;
  height: 40% !important;
  // border-left: 1px solid #f0f2f5;
  // border-top: 1px solid #f0f2f5;
  // border-right: 1px solid #f0f2f5;
}

:deep(.el-scrollbar__view) {
  height: 100% !important;
}

:deep(.el-dialog__title) {
  font-weight: 600 !important;
  color: #0C0D0E !important;
}

:deep(.el-dialog__body) {
  height: 300px !important;
}

:deep(.el-checkbox) {
  width: 214px;
  height: 56px;
}

:deep(.el-tree) {
  background-color: #ebeff8;
  height: 100%;
}

:deep(.el-vl__wrapper) {
  height: 100%;
}

:deep(.el-checkbox__inner) {
  width: 20px !important;
  height: 20px !important;
}

.el-dialog {
  border-radius: 12px !important;
}


:deep(.el-dialog) {
  border-radius: 20px !important;
}

.icon {
  &:hover {
    cursor: pointer;
  }
}

.muted {
  color: gray;
  font-size: 80%;
}

// :deep(.el-collapse){
//   flex: 1;
// }</style>

<style>
.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}

:deep(.el-dialog) {
  border-radius: 20px !important;
  --el-dialog-border-radius: 20px !important;
}
</style>
